<script setup>
import {getConMyPageList} from "@/api/contract/myContract.js"
import router from "@/router/index.js"
import useLoginUserStore from "@/store/modules/user.js";
import {formatAmountForTable, getTagType} from "@/utils/contract.js";
import {onActivatedFunctions, tableFunctions} from "@/utils/common.js";
import ListQueryToolbar from "@/components/ListQueryToolbar/ListQueryToolbar.vue";
import useAppStore from "@/store/modules/app.js";

const device = computed(() => useAppStore().device);
const {proxy} = getCurrentInstance()
const {tradeType} = proxy.useDict(["tradeType", true])
const loginUserStore = useLoginUserStore()
const uniqueId = ref("")
const loginUserId = loginUserStore.id
const myContractList = ref([])
const loading = ref(false)
const showSearch = ref(true)
const total = ref(0)
const dateRangeLabel = ref('更新时间')
const props = defineProps({
  status: {
    type: String
  },
  conStatus: {
    type: Array
  }
})
// 列显隐信息
const columns = ref({
  conNo: {key: 'conNo', label: `合同编号`, visible: true},
  name: {key: 'name', label: `合同名称`, visible: true},
  total: {key: 'total', label: `金额`, visible: true},
  conType: {key: 'conType', label: `合同类型`, visible: false},
  tradeType: {key: 'tradeType', label: `买卖方向`, visible: true},
  status: {key: 'status', label: `状态`, visible: true},
  operatorName: {key: 'operatorName', label: `当前办理人`, visible: true},
  updateTime: {key: 'updateTime', label: `更新时间`, visible: true},
  createTime: {key: 'createTime', label: `新建时间`, visible: false}
})
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    orderField: '',//排序字段
    orderRule: '',//排序规则
    dateRange: [],
    status: props.status,
    operatorName: undefined,
    name: undefined,
    conNo: undefined,
    tradeType: '',
    tradeCompany: undefined,
  }
})
const {queryParams} = toRefs(data)
const {tableSort} = tableFunctions(queryParams, getList)

onMounted(() => {
  switch (props.status) {
    case '已归档':
      dateRangeLabel.value = '归档时间'
      break
    case '已废弃':
      dateRangeLabel.value = '废弃时间'
      break
    default :
      dateRangeLabel.value = '更新时间'
  }
  getList()
})

onActivatedFunctions(getList, uniqueId)

defineExpose({
  resetQuery
})

function getList() {
  loading.value = true
  getConMyPageList(proxy.addDateRange(queryParams.value, 'UpdateTime')).then(res => {
    loading.value = false
    myContractList.value = res.list
    total.value = res.total
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef")
  queryParams.value. dateRange = []
  queryParams.value.status = props.status
  queryParams.value.orderField = ''
  queryParams.value.orderRule = ''
  proxy.$refs.tableRef?.clearSort()
  handleQuery()
}

const isLoadMoreQueryParams = ref(false)
const setLoadMoreQueryParams = (isLoadMoreQuery) => {
  isLoadMoreQueryParams.value = isLoadMoreQuery
}

/** 修改操作 */
function handleUpdate(row) {
  const conId = row.id
  router.push({ path: "/contract/my/view/" + conId , query: {customTitle: '我的合同 - ' + row.name}})
}

</script>

<template>
  <el-row>
    <el-col :span="24">
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="auto" label-position="top">
        <el-row :gutter="10" v-show="showSearch">
          <el-col :span="6" :xs="24">
            <el-form-item label="对方单位名称" prop="tradeCompany" >
              <el-input
                  v-model="queryParams.tradeCompany"
                  placeholder="对方单位名称"
                  clearable
                  :style="device==='mobile' ? 'width: 300px' : 'width: 320px'"
                  @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :gutter="10">
            <el-form-item label="合同名称" prop="name">
              <el-input
                  v-model="queryParams.name"
                  placeholder="合同名称"
                  clearable
                  :style="device==='mobile' ? 'width: 300px' : 'width: 320px'"
                  @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :gutter="10">
            <el-form-item label="合同编号" prop="conNo">
              <el-input
                  v-model="queryParams.conNo"
                  placeholder="合同编号"
                  clearable
                  :style="device==='mobile' ? 'width: 300px' : 'width: 320px'"
                  @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="当前办理人" prop="operatorName">
              <el-input
                  v-model="queryParams.operatorName"
                  placeholder="当前办理人姓名"
                  clearable
                  :style="device==='mobile' ? 'width: 300px' : 'width: 320px'"
                  @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" v-if="isLoadMoreQueryParams">
            <el-form-item label="买卖方向" prop="tradeType" >
              <el-select
                  v-model="queryParams.tradeType"
                  placeholder="买卖方向"
                  clearable
                  :style="device==='mobile' ? 'width: 300px' : 'width: 320px'"
                  :empty-values="[null, undefined]"
              >
                <el-option
                    v-for="item in tradeType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" v-if="isLoadMoreQueryParams">
            <el-form-item :label="dateRangeLabel" :style="device==='mobile' ? 'max-width: 300px' : 'max-width: 320px'">
              <el-date-picker
                  v-model="queryParams.dateRange"
                  value-format="YYYY-MM-DD"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" v-if="isLoadMoreQueryParams">
            <el-form-item label="合同状态" prop="status" v-show="status===''" >
              <el-select
                  v-model="queryParams.status"
                  placeholder="合同状态"
                  clearable
                  :style="device==='mobile' ? 'width: 300px' : 'width: 320px'"
                  :empty-values="[null, undefined]"
              >
                <el-option
                    v-for="status in conStatus"
                    :key="status.value"
                    :label="status.label"
                    :value="status.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="10" class="mb10">
        <ListQueryToolbar :isShowQueryParams="showSearch" isShowLoadMore :isLoadMoreQueryParams="isLoadMoreQueryParams"
                          @handleQuery="handleQuery" @resetQuery="resetQuery" @setLoadMoreQueryParams="setLoadMoreQueryParams"/>
        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns" v-show="total > 0"
                       :class="{'mt10': device==='mobile'}"/>
      </el-row>

      <el-table ref="tableRef" v-loading="loading" :data="myContractList" @sort-change="tableSort">
        <el-table-column :label="columns.conNo.label" key="conNo" prop="conNo" v-if="columns.conNo.visible" width="220" sortable="custom"/>
        <el-table-column :label="columns.name.label" key="name" prop="name" v-if="columns.name.visible" :show-overflow-tooltip="true"
                         sortable="custom" min-width="300">
          <template #default="scope">
            <el-link @click="handleUpdate(scope.row)" type="primary">
              <el-text type="success">{{scope.row.tradeCompany}} -&nbsp;</el-text>{{scope.row.name}}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column :label="columns.total.label" key="total" prop="total" :formatter="formatAmountForTable" v-if="columns.total.visible" width="150" sortable="custom" />
        <el-table-column :label="columns.conType.label" key="conType" prop="conType" v-if="columns.conType.visible" width="150" :show-overflow-tooltip="true" sortable="custom"/>
        <el-table-column :label="columns.tradeType.label" key="tradeType" prop="tradeType" v-if="columns.tradeType.visible" width="100" sortable="custom" />
        <el-table-column :label="columns.status.label" key="status" prop="status" v-if="columns.status.visible" width="100" sortable="custom">
          <template #default="scope">
            <el-text :type="getTagType(scope.row.status)"> {{ scope.row.status }} </el-text>
          </template>
        </el-table-column>

        <el-table-column :label="columns.operatorName.label" key="operatorName" prop="operatorName" v-if="columns.operatorName.visible" width="130" :show-overflow-tooltip="true" sortable="custom">
          <template #default="scope">
            <el-text :type="scope.row.operatorId===loginUserId?'success':''"> {{ scope.row.operatorName }} </el-text>
          </template>
        </el-table-column>
        <el-table-column :label="columns.updateTime.label" key="updateTime" prop="updateTime" v-if="columns.updateTime.visible" width="190" sortable="custom" />
        <el-table-column :label="columns.createTime.label" key="createTime" prop="createTime" v-if="columns.createTime.visible" width="190" sortable="custom" />
      </el-table>
      <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
      />
    </el-col>
  </el-row>
</template>
